.wos-setting {
  width: 100%;
  height: 100%;
  color: var(--el-text-color-regular);
  text-shadow: none;
  background-color: var(--wos-box-center-bg);

  .groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    height: 100%;
    padding: 16px;
    overflow: auto;

    .group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 24px;

      .title {
        margin-bottom: 8px;
        font-size: 1rem;
        font-weight: 700;
        line-height: 24px;
        text-align: center;
      }

      .content {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: space-around;

        .el-image {
          max-width: 88px;
          max-height: 80px;
        }

        .outline-box {
          background-color: rgb(0 0 0 / 8%);
        }

        .outline-box-active {
          background-color: rgb(0 0 0 / 12%);
          border:solid 1px #2a79f3;
          border-radius: var(--radius);

          svg,.el-text
          {
            color: #2a79f3;
          }
        }

        .font-pingfang-sc {
          font-family: PingFangSC-Regular-ttf;
        }

        .font-pingfang-sc-bold {
          font-family: PingFangSC-Semibold-ttf;
        }

        .font-pingfang {
          font-family: PingFang-SC-Regular;
        }

        .font-pingfang-bold {
          font-family: PingFang-SC-Semibold;
        }

        .font-alipuhui {
          font-family: 'AlibabaPuHuiTi-2-55-Regular';
        }

        .font-alipuhui-bold {
          font-family: 'AlibabaPuHuiTi-2-75-SemiBold';
        }

        .font-harmony {
          font-family: 'HarmonyOS_Sans_SC_Regular';
        }

        .font-harmony-bold {
          font-family: 'HarmonyOS_Sans_SC_Blod';
        }

        .font-hansans {
          font-family: SourceHanSansCN-Regular;
        }

        .font-hansans-bold {
          font-family: SourceHanSansCN-Bold;
        }

        /* From Uiverse.io by Galahhad */

        /* level settings 👇 */

        .slider {
          /* slider */
          --slider-width: 100%;
          --slider-height: 16px;
          --slider-bg: rgb(0 0 0 / 8%);
          --slider-border-radius: 999px;

          /* level */
          --level-color: var(--webkit-scrollbar-thumb-bg-color);
          --level-transition-duration: 0.1s;

          /* icon */
          --icon-margin: 15px;
          --icon-color: var(--slider-bg);
          --icon-size: 25px;

          display: -webkit-inline-box;
          display: -ms-inline-flexbox;
          display: inline-flex;
          flex-direction: row-reverse;
          align-items: center;
          width: 100%;
          cursor: pointer;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: reverse;
          -webkit-box-align: center;
          -ms-flex-align: center;
        }

        .slider .level {
          width: var(--slider-width);
          height: var(--slider-height);
          overflow: hidden;
          appearance: none;
          cursor: inherit;
          background: var(--slider-bg);
          border-radius: var(--slider-border-radius);
          transition: height var(--level-transition-duration);
        }

        .slider .level::-webkit-slider-thumb {
          width: 0;
          height: 0;
          appearance: none;
          box-shadow: -200px 0 0 200px var(--level-color);
        }

        .slider:hover .level {
          height: calc(var(--slider-height) * 2);
        }
      }
    }
  }
}
